<template>
    <PageView>
        <a-card title="转盘">
            <a-table
                :loading="loading"
                :columns="columns"
                :dataSource="data"
                :pagination="false"
                bordered :scroll="{x:true}">
            </a-table>
        </a-card>
        <!--修改弹窗-->
        <a-modal title="修改" centered :visible="visible" @ok="handleOk" :confirmLoading="confirmLoading" @cancel="visible = false" width="360px">
            <div class="imgCon">
                <img :src="image" v-if="image" alt="">
                <div class="text" v-else>请上传图片</div>
                <input @change="handleChange" type="file" accept="image/*"/>
            </div>
            <a-form :form="form">
                <a-form-item label="名称">
                    <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入名称' }] }]" placeholder="请输入名称"/>
                </a-form-item>
                <a-form-item label="概率">
                    <a-input v-decorator="['chance', { rules: [{ required: true, message: '请输入概率' }] }]" placeholder="请输入概率"/>
                </a-form-item>
                <a-form-item label="金额">
                    <a-input v-decorator="['money', { rules: [{ required: true, message: '请输入金额' }] }]" placeholder="请输入金额"/>
                </a-form-item>
                <a-form-item label="每日抽奖次数">
                    <a-input v-decorator="['today_num', { rules: [{ required: true, message: '请输入每日抽奖次数' }] }]" placeholder="请输入每日抽奖次数"/>
                </a-form-item>
                <a-form-item label="总抽奖次数">
                    <a-input v-decorator="['total_num', { rules: [{ required: true, message: '请输入总抽奖次数' }] }]" placeholder="请输入总抽奖次数"/>
                </a-form-item>
            </a-form>
        </a-modal>
    </PageView>
</template>

<script type="text/jsx">
    import Turntable from '../../api/Turntable'
    import Member from '../../api/Member'

    export default {
        name: 'pan',
        data () {
            return {
                loading: true,
                columns: [
                    {
                        title: '名称',
                        dataIndex: 'name',
                        customRender: (v) => <a>{v}</a>
                    },
                    {
                        title: '图片',
                        dataIndex: 'image',
                        customRender: (v) => <img style="height:40px;" src={v}/>
                    },
                    {
                        title: '概率',
                        dataIndex: 'chance',
                    },
                    {
                        title: '金额',
                        dataIndex: 'money',
                    },
                    {
                        title: '每日抽奖次数',
                        dataIndex: 'today_num',
                    },
                    {
                        title: '总抽奖次数',
                        dataIndex: 'total_num',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 110,
                        customRender: (v) => {
                            return (
                                <a-button-group>
                                    <a-button
                                        type="primary"
                                        onClick={()=>{
                                            this.id = v.id
                                            this.image = v.image
                                            this.visible = true
                                            this.$nextTick(()=>{
                                                Object.keys(this.form.getFieldsValue()).forEach(v1=>{
                                                    this.form.setFieldsValue({[v1]:v[v1]})
                                                })
                                            })
                                        }}>
                                        修改
                                    </a-button>
                                </a-button-group>
                            )
                        }
                    }
                ],
                data: [],
                confirmLoading:false,
                visible:false,
                form: this.$form.createForm(this),
                image:"",
                id:""
            }
        },
        activated () {
            this.getList()
        },
        methods: {
            getList () {
                this.loading = true
                Turntable.turanTable().then(res => {
                    this.data = res.data.map((value, key) => {
                        return { ...value, key }
                    })
                    this.loading = false
                })
            },
            handleChange(e){
                let file = e.target.files[0];
                let reader = new FileReader();
                reader.onload = () => {
                    Member.uploadPic({image:reader.result}).then(res=>{
                        this.image = res.url1
                    })
                    reader.onload = null;
                };
                reader.readAsDataURL(file);
            },
            handleOk(){
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.confirmLoading = true
                        Turntable.saveTurn({...values,id:this.id,image:this.image}).then(res => {
                            this.confirmLoading = false
                            this.visible = false
                            this.getList()
                        }).catch(res=>{
                            this.visible = false
                            this.confirmLoading = false
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .inputGroup {
        > div {
            margin-bottom: 20px;
        }
    }
    .imgCon{
        @size:80px;
        width: @size;
        height: @size;
        border-radius: 4px;
        border: 1px dashed rgba(0,0,0,0.2);
        margin: 10px auto;
        background: rgba(200,200,200,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .text{
            font-size: 13px;
            color: rgba(0,0,0,0.5);
        }
        input{
            position: absolute;
            z-index: 1;
            display: block;
            width: 100%;
            height: 100%;
            left: 0px;
            top: 0px;
            opacity: 0;
        }
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
</style>